<template>
  <el-row>
    <el-col :span="20">
      {{ nodeTree.name }}==={{ nodeTree.id }}
    </el-col>
    <el-col :span="4">
      <el-row>
        <el-col :span="12">
          {{ nodeTree.id?nodeTree.manager:'负责人' }}
        </el-col>
        <el-col :span="12">
          <el-dropdown class="avatar-container" trigger="hover">
            <div class="avatar-wrapper">
              <span>操作</span>
              <i class="el-icon-arrow-down" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item @click.native="addDepart(nodeTree.id)">
                添加子部门
              </el-dropdown-item>

              <el-dropdown-item v-if="nodeTree.id" @click.native="editDepart(nodeTree)">
                查看部门
              </el-dropdown-item>

              <el-dropdown-item v-if="nodeTree.id" @click.native="delDepart(nodeTree.id)">
                删除部门
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: '',
  props: {
    nodeTree: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  // watch: {
  //   nodeTree: {
  //     handler(newVal, oldVal) {
  //       console.log(newVal, 8887777)
  //     },
  //     immediate: true
  //   }
  // },
  methods: {
    addDepart(id) {
      console.log(121)
      this.$emit('add', id)
    },
    //  删除
    delDepart(id) {
      this.$emit('del', id)
    },
    //  编辑
    editDepart(item) {
      this.$emit('edit', item)
    }
  }
}

</script>
<style lang='scss' scoped>
  .el-row {
    width: 100%;

    .el-col {
      height: 30px;
      line-height: 30px;
    }
  }

</style>
